import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import { CloseOutlined, WechatFilled, QqOutlined, MailFilled, CopyOutlined, CheckOutlined } from '@ant-design/icons'
import { UserService } from '../../../transfer/service/UserService'

interface IThanksModelProps {
    userId: string
    url: string
    onclose: () => void
}

export default function ThanksModel(props: IThanksModelProps) {
    const [nickName, setNickName] = useState<any>()
    const [url, setUrl] = useState<any>()
    const [isCopy, setIsCopy] = useState(false)

    const copy = () => {
        document.designMode = 'on'
        let ele = document.createElement('input')!
        document.body.appendChild(ele)
        ele.setAttribute('value', 'http://localhost:3000/user/photos/' + props.userId)
        ele.setAttribute('readonly', 'readonly')
        ele.select()
        document.execCommand('copy')
        document.body.removeChild(ele)
        document.designMode = 'off'
        setIsCopy(true)
    }

    useEffect(() => {
        new UserService().getProfile(props.userId).then(res => {
            setNickName(res.data.data.profile.nickName)
        })

        JSON.parse(localStorage.getItem('account') as any).id == props.userId
            ? setUrl('/profile/photos/' + props.userId)
            : setUrl('/user/photos/' + props.userId)
    }, [props.userId])

    return (
        <div className={style.thanks__container}>
            <div className={style.thanks__image}>
                <img src={'http://localhost:3000/' + props.url} />
            </div>
            <div className={style.thanks__content}>
                <span className={style.title}>向作者说声感谢🙌</span>
                <span className={style.info}>
                    在作者 <a href={url}>{nickName}</a> 的社交网站上发送感谢消息，或者将下面的文字信息复制粘贴到网址中。
                </span>
                <div className={style.btn__list}>
                    <QqOutlined />
                    <WechatFilled />
                    <MailFilled />
                </div>
                <div className={style.link__input}>
                    <span>
                        图片由作者 <a href={url}>{nickName}</a> 上传在 <a href={'/'}>LineView</a>
                    </span>
                    {isCopy ? <CheckOutlined /> : <CopyOutlined className={style.link__icon} onClick={copy} />}
                </div>
            </div>
            <CloseOutlined className={style.close__btn} onClick={props.onclose} />
        </div>
    )
}
